<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>echarts作品</title>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <style>
    .container {
        width: 800px;
    }

    #main {
        height: 600px;
        width: 800px;
        margin: 20px auto;
    }
    a:hover {
        color: #FFC0CB
    }
    </style>
</head>

<body>
    <div class="container">
        <h1>期末作业 <small>数据可视化</small></h1>
        <div id="main"></div>
        <div class="panel panel-danger">
            <div class="panel-heading">数据来源</div>
            <div class="panel-body">
                <p> <a href="http://tianqi.2345.com/wea_history/59431.htm" target="_blank">·2345天气预报</a></p>
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.title = '折柱混合';

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['空气质量指数', '最高气温',  '最低气温']
        },
        xAxis: [{
            type: 'category',
            data: ['6.4', '6.5', '6.6', '6.7', '6.8', '6.9', '6.10', '6.11', '6.12', '6.13', '6.14', '6.15'],
            axisPointer: {
                type: 'shadow'
            }
        }],
        yAxis: [{
                type: 'value',
                name: '空气质量指数',
                min: 0,
                max: 70,
                interval: 50,
                
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 40,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [{
                name: '空气质量指数',
                type: 'bar',
                data: [37, 29, 49, 49, 37, 54, 63, 57, 42, 33, 46, 62]
            },
            {
                name: '最高气温',
                type: 'line',
                yAxisIndex: 1,
                data: [32, 32, 33, 32, 33, 35, 35, 32, 34, 33, 32, 34]
            },
            
            {
                name: '最低气温',
                type: 'line',
                yAxisIndex: 1,
                data: [25, 24, 24, 24, 26, 26, 26, 25, 26, 25, 25, 25]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>
